<template>
  <view class="reminder-selector" v-if="visible">
    <view class="reminder-mask" @tap="cancel"></view>
    <view class="reminder-content">
      <view class="reminder-header">
        <text class="cancel-btn" @tap="cancel">取消</text>
        <text class="title">纪念日提醒</text>
        <text class="confirm-btn" @tap="confirm">确定</text>
      </view>
      <view class="picker-container">
        <!-- 提醒天数选择器 -->
        <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="[dayIndex]" @change="onDayChange">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in dayOptions" :key="index">
              <text>{{ item.text }}</text>
            </view>
          </picker-view-column>
        </picker-view>
        
        <!-- 提醒时间选择器 -->
        <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="[timeIndex]" @change="onTimeChange">
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in timeOptions" :key="index">
              <text>{{ item }}</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch, computed } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  value: {
    type: String,
    default: '提前1天'
  }
});

const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

// 提醒天数选项
const dayOptions = [
  { text: '提前3天', value: 3 },
  { text: '提前2天', value: 2 },
  { text: '提前1天', value: 1 },
  { text: '当天', value: 0 },
  { text: '不提醒', value: -1 }
];

// 提醒时间选项
const timeOptions = [
  '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
  '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
  '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
  '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
];

// 当前选中的天数索引和时间索引
const dayIndex = ref(2); // 默认选中"提前1天"
const timeIndex = ref(9); // 默认选中"09:00"

// 选择器样式
const indicatorStyle = 'height: 80rpx; line-height: 80rpx;';

// 解析当前值
const parseValue = (value) => {
  // 默认值
  let day = 1;
  let time = '09:00';
  
  if (!value) return { day, time };
  
  // 解析提醒天数
  if (value.includes('提前3天')) {
    day = 3;
  } else if (value.includes('提前2天')) {
    day = 2;
  } else if (value.includes('提前1天')) {
    day = 1;
  } else if (value.includes('当天')) {
    day = 0;
  } else if (value.includes('不提醒')) {
    day = -1;
  }
  
  // 解析提醒时间
  const timeMatch = value.match(/(\d{1,2}:\d{2})/);
  if (timeMatch) {
    time = timeMatch[1];
  }
  
  return { day, time };
};

// 监听value变化，更新选中索引
watch(() => props.value, (newVal) => {
  const { day, time } = parseValue(newVal);
  
  // 更新天数索引
  const dayIdx = dayOptions.findIndex(item => item.value === day);
  if (dayIdx !== -1) {
    dayIndex.value = dayIdx;
  }
  
  // 更新时间索引
  const timeIdx = timeOptions.findIndex(item => item === time);
  if (timeIdx !== -1) {
    timeIndex.value = timeIdx;
  }
}, { immediate: true });

// 天数变化处理
const onDayChange = (e) => {
  dayIndex.value = e.detail.value[0];
};

// 时间变化处理
const onTimeChange = (e) => {
  timeIndex.value = e.detail.value[0];
};

// 确认选择
const confirm = () => {
  const selectedDay = dayOptions[dayIndex.value];
  const selectedTime = timeOptions[timeIndex.value];
  
  // 如果选择"不提醒"，则不包含时间
  let reminderText = selectedDay.text;
  if (selectedDay.value !== -1) {
    reminderText += ` ${selectedTime}`;
  }
  
  emit('confirm', reminderText);
  emit('update:visible', false);
};

// 取消选择
const cancel = () => {
  emit('cancel');
  emit('update:visible', false);
};
</script>

<style lang="scss" scoped>
.reminder-selector {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.reminder-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.reminder-content {
  position: relative;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

.reminder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.cancel-btn, .confirm-btn {
  font-size: 32rpx;
  padding: 0 20rpx;
}

.cancel-btn {
  color: #999;
}

.confirm-btn {
  color: #007AFF;
}

.picker-container {
  display: flex;
  height: 400rpx;
  padding: 20rpx 0;
}

.picker-view {
  flex: 1;
  height: 100%;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
}
</style>